<template>
  <div>
    <div id="test"></div>
    <h1>{{ title }}</h1>
    <h2>{{ titleX3 }}</h2>
    <button @click="changeTit">reserve title</button>

    <hr />

    <h1>{{ msg }}</h1>
    <h1>{{ msg2 }}</h1>
    <div>
      {{ list }}
    </div>
    <div>
      <div class="page">
        <!--        <Counter />-->
      </div>
      <div class="page">
        <!--        <Counter />-->
      </div>
      <div class="page"></div>
      <div class="page"></div>
      <div class="page"></div>
    </div>
  </div>
</template>

<script>
import { mapActions, mapState, mapGetters, mapMutations } from "vuex";
// import Counter from "@/components/Counter";
export default {
  name: "BMI",
  components: {
    // Counter,
  },
  data() {
    return {
      title: "Hello BMI",
    };
  },
  computed: {
    ...mapState("bmi", ["msg", "list"]),
    ...mapGetters("bmi", ["count123", "msg2"]),
    titleX3() {
      return this.title.repeat(3);
    },
  },
  methods: {
    ...mapActions("bmi", ["getList"]),
    ...mapMutations("bmi", ["SET_LIST"]),
    changeTit() {
      this.title = this.title.split("").reverse().join("");
    },
  },
  async created() {
    try {
      await this.getList();
    } catch (e) {
      console.log(e);
    } finally {
      console.log("finally");
    }
  },
  mounted() {
    // this.$store.commit('bmi/SET_LIST', [123, 345])
    // this.$store.dispatch('bmi/getList')
    /*
    console.log(this.$store.state.bmi.count)
    console.log(this.$store.state.bmi.msg)
    console.log('====================')
    console.log(this.$store.getters)*/
  },
};
</script>

<style scoped lang="stylus">

_height = 50vh

.page
  height: _height;
  background-color: aqua;
  display flex
  flex-direction column
  justify-content space-between

  _opa = .5
  bg = red

  &:nth-child(even) {
    background-color: bg;
  }

  &:hover
    opacity _opa

  &::before
    content 'before'
    font-size 40px

  &::after
    content 'after'
    font-size 40px
/*.page {
  height: 50vh;
  background-color: aqua;
}

.page:nth-child(even) {
  background-color: #ff9dac;
}*/
</style>
